<template>
  <v-scale-screen full-screen width="1920" style="overflow: hidden" class="p-main" height="1080">
    <div class="p-con">
      <div class="p-head">
        <div class="headTitle" />
        <div class="headTime">
          <div>
            <span class="headPage1 headPage2" @click="changePage('/home/index')"><span>首页</span></span>
            <span class="headPage1 headPage2" @click="changePage('/prediction/index')"><span>总经济活力发展趋势回溯</span></span>
            <span class="headPage1 "><span>一带一路国家投资风险指数</span></span>
          </div>
          <div style="display: flex">
            <div v-if="weatherCurrent.weather" class="weather-box">
              <img :src="require('@/assets/images/icon_weather/'+weatherCurrent.weather+'.png')" alt="">
              {{ weatherCurrent.temperature }}℃
            </div>
            <p class="headPage3">
              {{ time | parseTime() }}
            </p>
          </div>
        </div>
      </div>
      <div class="p-win">
        <div class="p-left">
          <div class="p-right-card">
            <div class="p-right-card-head" style="align-items: center">
              <div class="p-right-card-head-text">
                <p class="card-title-text">
                  经济发展不平衡性
                </p>
              </div>

              <div style="display: flex">
                <el-select v-model="nationalValue" style="width: 100px;margin-right: 12px;" placeholder="请选择" @change="fetchData">
                  <el-option
                    v-for="item in nationalOption"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-select v-model="typeValue" style="width: 160px" placeholder="请选择" @change="fetchData">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </div>
            </div>

            <div style="width: 610px;height: 400px;">
              <line-bar-chart v-if="dayData.data.value2.length > 0" :chart-data="dayData" />
            </div>
          </div>

          <div class="p-right-card">
            <div class="p-right-card-head" style="align-items: center">
              <div class="p-right-card-head-text">
                <p class="card-title-text">
                  各国GDP与风险指数关系演变图
                </p>
              </div>
            </div>

            <div style="width: 610px;height: 400px;">
              <scatter-chart v-if="scatterData.data.series.length > 0" :chart-data="scatterData" />
            </div>
          </div>
        </div>
        <div class="p-right">
          <div class="p-right-card p-right-card2">
            <div class="p-right-card-head" style="align-items: center">
              <div class="p-right-card-head-text">
                <p class="card-title-text">
                  全球人才与经济发展数据
                </p>
              </div>

              <el-date-picker
                v-model="globalYear"
                type="year"
                value-format="yyyy"
                :popper-class="'custom-date-picker-popup'"
                @change="handleGlobalYearChange"
              />
            </div>
            <div class="p-card-con">
              <div class="p-card-over">
                <div class="p-card-body">
                  <div v-for="(item, index) in globalList" :key="index" class="p-card-body-item">
                    <div style="display: flex;justify-content: space-between;align-items: center;width: 377px;padding-right: 26px;">
                      <div class="p-card-body-item-1">
                        <div class="p-card-title">
                          {{ item.country_name }}
                          <div v-if="item.chain != 0 && item.chain != '0.0'" class="p-card-title-img" :class="[item.chain < 0? 'p-card-title-img2': '']">
                            <img v-if="item.chain > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                            <img v-if="item.chain < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">{{ item.chain }}%
                          </div>
                        </div>
                        <div>GDP：{{ item.gdp }}万亿</div>
                      </div>
                      <div class="p-card-body-item-2">
                        <div class="p-card-title2">
                          {{ item.economicload_imbalance }} <span style="font-size: 14px;">亿</span>
                        </div>
                        <div>经济发展不平衡指数</div>
                      </div>
                    </div>
                    <div class="p-card-body-item-3">
                      <div class="p-card-title2">
                        {{ item.vitality_index }} <span style="font-size: 14px;">万人</span>
                      </div>
                      <div>人才外流风险指数</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="p-foot" />
    </div>
  </v-scale-screen>
</template>

<script>
import LineBarChart from './LineBarChart'
import ScatterChart from './ScatterChart'
import { allCountries, dictData, dictData2, economicloadImbalance } from '@/api/trumpet'
export default {
  name: 'Index',
  components: {
    LineBarChart,
    ScatterChart
  },
  data() {
    return {
      typeOptions: [],
      typeValue: 63,
      nationalOption: [],
      nationalValue: 69,

      globalYear: '2023',
      timer: null,
      time: new Date().getTime(),
      circle1Data: {
        name: '供需数',
        data: [{
          name: '同比',
          value: 50
        },
        {
          name: '环比',
          value: 20
        }]
      },
      dayData: {
        name: '当日竞价情况统计',
        data: {
          names: [],
          value1: [],
          value2: []
        }
      },
      weatherCurrent: {},

      globalList: [],
      scatterData: {
        name: '全球人才与经济发展数据',
        data: {
          counties: [],
          timeline: [],
          series: []
        }
      }
    }
  },
  mounted() {
    this.showCityInfo()
    this.timer = setInterval(() => {
      this.time = new Date().getTime()
    }, 1000)

    this.fetchNationalOptions(11, 1)
    this.fetchAllNational('2023', 1)
    this.fetchAllNational('', 2, 1, 100)
    this.fetchData()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 经济发展不平衡性
    fetchData() {
      economicloadImbalance({
        year: '',
        type: this.typeValue,
        country: this.nationalValue
      }).then(res => {
        this.dayData.data.names = res.data.reverse().map((item) => {
          return item.year
        })
        this.dayData.data.value1 = res.data.reverse().map((item) => {
          return item.vitality_index
        })
        this.dayData.data.value2 = res.data.reverse().map((item) => {
          return item.predictive_index
        })
      })
    },
    // 获取所有国家下拉框数据
    fetchNationalOptions(dictId, type) {
      dictData({ dictId: 11 }).then(res => {
        this.nationalOption = res.data
      })
      dictData2({ dictId: 12 }).then(res => {
        this.typeOptions = res.data
      })
    },
    handleGlobalYearChange(e) {
      this.fetchAllNational(e, 1)
    },
    // 获取国家数据
    fetchAllNational(year, type, page, limit) {
      allCountries({ year: year, page: page, limit: limit }).then(res => {
        if (type === 1) {
          this.globalList = res.data
        } else {
          const counties = [...new Set(res.data.map(item => item.country_name))]
          const years = [...new Set(res.data.map(item => item.year))].sort(
            // 数组排序
            (a, b) => a - b
          )
          const scatters = []
          years.forEach(year => {
            const scatterYear = res.data.filter(item => item.year === year)
            console.log(scatterYear)
            const scatterItem = []
            // 人才 gdp 不平衡
            scatterYear.forEach(item => {
              scatterItem.push([
                item.vitality_index,
                item.gdp,
                item.economicload_imbalance,
                item.country_name,
                item.year
              ])
            })

            scatters.push(scatterItem)
          })

          this.scatterData.data.counties = counties
          this.scatterData.data.timeline = years
          this.scatterData.data.series = scatters
          console.log(333, res.data, counties, scatters)
        }
      })
    },

    showCityInfo() {
      const _this = this
      // 实例化城市查询类
      var citysearch = new AMap.CitySearch()
      // 自动获取用户IP，返回当前城市
      citysearch.getLocalCity(function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.city) {
            var cityinfo = result.city

            // 加载天气查询插件
            AMap.plugin('AMap.Weather', function() {
              // 创建天气查询实例
              var weather = new AMap.Weather()

              // eslint-disable-next-line handle-callback-err
              weather.getLive(cityinfo, function(err, data) {
                console.log(data)
                _this.weatherCurrent = data
              })
            })
          }
        } else {
          // document.getElementById('info').innerHTML = result.info;
        }
      })
    },
    changePage(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.screen-wrapper{
  background: url("~@/assets/images/bg.png") no-repeat;
  background-size: cover;
}
.p-con{
  width: 100%;
  background: url("~@/assets/images/bg.png") no-repeat;
  background-size: cover;
}
.weather-box{
  display: flex;
  align-items: flex-start;
  font-weight: 500;
  font-size: 18px;
  color: #D3DDE8;
  margin-right: 30px;
  img{
    display: inline-block;
    width: 29px;
    height: 26px;
  }
}
.p-head{
  background: url("~@/assets/images/head.png") no-repeat;
  background-size: 100%;
  height: 124px;
  width: 100%;
  .headTitle{
    height: 67px;
    left: 50%;
    margin-left: 40%;
    width: 20%;
    background: url("~@/assets/images/p/b0.png") no-repeat center 20px;
    background-size: 100% 47px;
  }
  .headPage{
    margin-left: 2%;
    width: 25%;
    display: flex;
    justify-content: space-between;
    background-size: 100%;
  }
  .headTime{
    width: 98%;
    display: flex;
    justify-content: space-between;
    background-size: 100%;
  }
  .headPage1{
    display: inline-block;
    cursor: pointer;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    height: 40px;
    background: url("~@/assets/images/pageyellow.png") no-repeat center;
    background-size: 100% 40px;
    span{
      word-break: keep-all;
      display: inline-block;
      padding: 0 30px;
    }
  }
  .headPage2{
    background: url("~@/assets/images/pageblue.png") no-repeat;
    background-size: 100% 40px;
  }
  .headPage3{
    font-weight: 400;
    font-size: 18px;
    color: #D3DDE8;
    text-align: center;
  }
}

.p-foot{
  height: 30px;
  background: url("~@/assets/images/p/b6.png") no-repeat;
  background-size: 100% 30px;
}
.p-win{
  display: flex;
  justify-content: space-between;
  padding: 10px 24px 30px 24px;
  width: 100%;
  height: 925px;
}

.p-left{
  width: 630px;
  height: 898px;
}
.p-right{
  width: 1224px;
  height: 898px;
}

.p-left-card{
  background: url("~@/assets/images/t/b1.png") no-repeat;
  background-size: 100% 100%;
  width: 630px;
  height: 439px;
}
.card-title{
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0 40px;
}

.card-title-text{
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  word-break: keep-all;
  background: linear-gradient(0deg, #68D0FF 0%, #FFFFFF 62.0361328125%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p-right-card{
  height: 439px;
  background: url("~@/assets/images/t/b1.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20px;

  .p-right-card-head{
    padding: 2px 6px 0 40px;
    display: flex;
    justify-content: space-between;
    .p-right-card-head-text{
      background: url("~@/assets/images/p/b8.png") no-repeat;
      background-size: 100% 100%;
      width: 193px;
      height: 34px;
      display: flex;
      align-items: center;
      .img1{
        width: 10px;
        height: 10px;
        margin-right: 10px;
      }
    }
  }
}

.p-right-card2{
  width: 1224px;
  height: 898px;
  background: url("~@/assets/images/t/b3.png") no-repeat;
  background-size: 100% 100%;
  .p-right-card-head{
    padding-left: 52px;
  }
}
.p-card-con{
  padding: 10px;
}
.p-card-over::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
.p-card-over::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
.p-card-over::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
.p-card-over::-webkit-scrollbar-thumb:hover{
  background: #333;
}
.p-card-over::-webkit-scrollbar-corner{
  background: #179a16;
}

.p-card-over{
  height: 820px;
  overflow-y: scroll;
  overflow-x: hidden;
  //overflow: hidden;
}
.p-card-body{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  .p-card-body-item{
    padding: 25px 37px 25px 25px;
    width: 580px;
    height: 90px;
    background: url("~@/assets/images/t/b4.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 14px;
    box-sizing: border-box;
    margin-right: 14px; // 调整项

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-weight: 400;
    font-size: 14px;
    color: rgba(54, 196, 255, 0.7);
    line-height: 34px;
  }
  .p-card-body-item:nth-child(2n) {
    margin-right: 0;
  }
  .p-card-title{
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    .p-card-title-img{
      padding: 2px 5px;
      height: 20px;
      background: rgba(10,255,143,0.1);
      border-radius: 2px;
      border: 1px solid rgba(10,255,143,0.4);
      margin-left: 24px;
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 14px;
      color: #0AFF8F;
      img{
        width: 9px;
        height: 12px;
      }
    }
    .p-card-title-img2{
      background: rgba(254,71,72,0.1);
      border: 1px solid rgba(254,71,72,0.4);
      color: #FE4748;
    }
  }
  .p-card-title2{
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    background: linear-gradient(0deg, #68D0FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    span{
      font-size: 14px;
    }
  }
  .p-card-body-item-1{}
  .p-card-body-item-1{}
  .p-card-body-item-1{}
}

::v-deep.el-cascader,.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 100px !important;
}
::v-deep .el-date-picker ,.el-popper .custom-date-picker-popup {
  background: aliceblue;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: #18BBFF;
  box-shadow: 0px 0px 20px 0px #0099FF inset;
  height: 30px;
  font-size: 14px;
  color: #FFFFFF;
}
/deep/.el-input__icon{
  line-height: 28px!important;
}

/* ---------------------------动画--------------------------------- */
@keyframes textTrans {
  0% {}
  100% {transform: translateY(-50%);}
}
/* 调用动画 */
.p-card-con .p-card-body {
  /* //infinite永久调用动画 */
  animation: textTrans 100s linear infinite;
}
/*鼠标划入 停止动画  */
.p-card-con .p-card-body:hover {
  animation-play-state: paused;
}
</style>
